<template>
  <view class="s-form-card" :style="{ margin: margin, padding: padding, backgroundColor: backgroundColor, borderRadius: borderRadius }">
    <view class="head">
      <view class="line" />
      <slot name="head-left" />
      <slot name="head-right" />
    </view>
    <view class="content">
      <slot />
    </view>
  </view>
</template>

<script setup>
// 接收参数
const props = defineProps({
  margin: {
    type: String,
    default: '20rpx 25rpx'
  },
  padding: {
    type: String,
    default: '30rpx 15rpx'
  },
  backgroundColor: {
    type: String,
    default: '#fff'
  },
  borderRadius: {
    type: String,
    default: '10rpx'
  }
})
</script>
<style scoped lang="scss">
.s-form-card {
}
.head {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10rpx;
	.line {
		position: absolute;
		left: -15rpx;
		width: 8rpx;
		height: 34rpx;
		background-color: var(--ui-BG-Main);
		border-radius: 4rpx;
	}
}
.content {
}
</style>
